{% extends "admin/base_site.html" %}
{% load i18n admin_urls static admin_list %}

{% block title %}{{ title }} | {{ site_title|default:_('Django site admin') }}{% endblock %}

{% block extrahead %}
    {{ block.super }}
    <style>
        .battle-group {
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-radius: 8px;
            overflow: hidden;
            background: #fff;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .battle-header {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 15px 20px;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
            position: relative;
        }
        
        .battle-header:hover {
            background: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
        }
        
        .battle-header.collapsed {
            border-bottom: none;
        }
        
        .battle-title {
            font-size: 16px;
            font-weight: bold;
            margin: 0;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        
        .battle-info {
            font-size: 14px;
            margin-top: 8px;
            opacity: 0.9;
        }
        
        .battle-stats {
            display: flex;
            gap: 20px;
            margin-top: 10px;
            font-size: 13px;
        }
        
        .stat-item {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        
        .toggle-icon {
            font-size: 18px;
            transition: transform 0.3s ease;
        }
        
        .toggle-icon.collapsed {
            transform: rotate(-90deg);
        }
        
        .battle-content {
            display: none;
            padding: 0;
        }
        
        .battle-content.show {
            display: block;
        }
        
        .rounds-table {
            width: 100%;
            border-collapse: collapse;
            margin: 0;
        }
        
        .rounds-table th {
            background: #f8f9fa;
            padding: 12px;
            text-align: center;
            border-bottom: 2px solid #dee2e6;
            font-weight: 600;
            color: #495057;
        }
        
        .rounds-table th:last-child {
            text-align: center;
        }
        
        .rounds-table td {
            padding: 12px;
            border-bottom: 1px solid #dee2e6;
            vertical-align: middle;
        }
        
        .rounds-table tr:hover {
            background: #f8f9fa;
        }
        
        .round-number {
            font-weight: bold;
            color: #007bff;
            text-align: center;
            min-width: 80px;
        }
        
        .actions-count {
            text-align: center;
            font-weight: 500;
        }
        
        .player1-actions {
            color: #28a745;
        }
        
        .player2-actions {
            color: #dc3545;
        }
        
        .round-time {
            color: #6c757d;
            font-size: 12px;
            text-align: center;
        }
        
        .status-badge {
            padding: 4px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            text-transform: uppercase;
        }
        
        .status-finished {
            background: #d4edda;
            color: #155724;
        }
        
        .status-running {
            background: #cce7ff;
            color: #004085;
        }
        
        .status-waiting {
            background: #f8d7da;
            color: #721c24;
        }
        
        .no-rounds {
            text-align: center;
            padding: 40px;
            color: #6c757d;
            font-style: italic;
        }
        
        .search-form {
            margin-bottom: 20px;
            padding: 15px;
            background: #f8f9fa;
            border-radius: 8px;
            border: 1px solid #dee2e6;
        }
        
        .search-form input, .search-form select {
            padding: 8px 12px;
            border: 1px solid #ced4da;
            border-radius: 4px;
            margin-right: 10px;
        }
        
        .search-form button {
            padding: 8px 16px;
            background: #007bff;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        
        .search-form button:hover {
            background: #0056b3;
        }
        
        .pagination {
            margin-top: 20px;
            text-align: center;
        }
        
        .pagination a, .pagination span {
            display: inline-block;
            padding: 8px 12px;
            margin: 0 2px;
            text-decoration: none;
            border: 1px solid #dee2e6;
            border-radius: 4px;
        }
        
        .pagination a:hover {
            background: #e9ecef;
        }
        
        .pagination .current {
            background: #007bff;
            color: white;
            border-color: #007bff;
        }
        
        .summary-stats {
            background: #e3f2fd;
            padding: 15px;
            border-radius: 8px;
            margin-bottom: 20px;
            display: flex;
            justify-content: space-around;
            text-align: center;
        }
        
        .summary-stats .stat {
            flex: 1;
        }
        
        .summary-stats .stat-number {
            font-size: 24px;
            font-weight: bold;
            color: #1976d2;
        }
        
        .summary-stats .stat-label {
            font-size: 14px;
            color: #666;
            margin-top: 5px;
        }
    </style>
{% endblock %}

{% block content %}
<div id="content-main">
    <div class="module filtered">
        <h1>{{ title }}</h1>
        
        <!-- 搜索表单 -->
        <form method="get" class="search-form">
            <input type="text" name="q" value="{{ search_query }}" placeholder="搜索玩家用户名...">
            <select name="battle__status__exact">
                <option value="">所有状态</option>
                <option value="pending" {% if status_filter == 'pending' %}selected{% endif %}>等待中</option>
                <option value="running" {% if status_filter == 'running' %}selected{% endif %}>进行中</option>
                <option value="finished" {% if status_filter == 'finished' %}selected{% endif %}>已完成</option>
                <option value="error" {% if status_filter == 'error' %}selected{% endif %}>错误</option>
            </select>
            <button type="submit">搜索</button>
            {% if search_query or status_filter %}
                <a href="?" style="margin-left: 10px; color: #dc3545;">清除筛选</a>
            {% endif %}
        </form>
        
        <!-- 统计摘要 -->
        <div class="summary-stats">
            <div class="stat">
                <div class="stat-number">{{ page_obj.paginator.count }}</div>
                <div class="stat-label">对战记录</div>
            </div>
            <div class="stat">
                <div class="stat-number">{{ battles_data|length }}</div>
                <div class="stat-label">当前页对战</div>
            </div>
            <div class="stat">
                <div class="stat-number">
                    {% for battle_data in battles_data %}
                        {{ battle_data.total_rounds|add:0 }}
                        {% if not forloop.last %}+{% endif %}
                    {% empty %}
                        0
                    {% endfor %}
                </div>
                <div class="stat-label">总回合数</div>
            </div>
        </div>
        
        {% if battles_data %}
            <!-- 对战分组列表 -->
            {% for battle_data in battles_data %}
                <div class="battle-group">
                    <div class="battle-header" onclick="toggleBattle({{ forloop.counter }})">
                        <div class="battle-title">
                            <span>
                                🎮 {{ battle_data.battle.player1.username }} vs {{ battle_data.battle.player2.username }}
                                <span class="status-badge status-{{ battle_data.battle.status }}">{{ battle_data.battle.get_status_display }}</span>
                            </span>
                            <span class="toggle-icon" id="toggle-{{ forloop.counter }}">▼</span>
                        </div>
                        <div class="battle-info">
                            📅 {{ battle_data.battle.created_at|date:"Y-m-d H:i:s" }}
                            {% if battle_data.battle.result %}
                                | 🏆 
                                {% if battle_data.battle.result == 'player1_win' %}
                                    {{ battle_data.battle.player1.username }} 获胜
                                {% elif battle_data.battle.result == 'player2_win' %}
                                    {{ battle_data.battle.player2.username }} 获胜
                                {% elif battle_data.battle.result == 'draw' %}
                                    平局
                                {% endif %}
                            {% endif %}
                        </div>
                        <div class="battle-stats">
                            <div class="stat-item">
                                <span>🔄</span>
                                <span>{{ battle_data.total_rounds }} 回合</span>
                            </div>
                            <div class="stat-item">
                                <span>⚡</span>
                                <span>{{ battle_data.total_actions_p1 }} / {{ battle_data.total_actions_p2 }} 行动</span>
                            </div>
                            {% if battle_data.battle.player1_score and battle_data.battle.player2_score %}
                                <div class="stat-item">
                                    <span>🎯</span>
                                    <span>{{ battle_data.battle.player1_score }} : {{ battle_data.battle.player2_score }}</span>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                    
                    <div class="battle-content" id="content-{{ forloop.counter }}">
                        {% if battle_data.rounds %}
                            <table class="rounds-table">
                                <thead>
                                    <tr>
                                        <th>回合</th>
                                        <th>{{ battle_data.battle.player1.username }} 行动</th>
                                        <th>{{ battle_data.battle.player2.username }} 行动</th>
                                        <th>时间</th>
                                        <th>操作</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {% for round in battle_data.rounds %}
                                        <tr>
                                            <td class="round-number">第 {{ round.round_number }} 回合</td>
                                            <td class="actions-count player1-actions">
                                                {% if round.player1_actions %}
                                                    {% if round.player1_actions|length %}
                                                        {{ round.player1_actions|length }} 个行动
                                                    {% else %}
                                                        {{ round.player1_actions|default:0 }} 个行动
                                                    {% endif %}
                                                {% else %}
                                                    0 个行动
                                                {% endif %}
                                            </td>
                                            <td class="actions-count player2-actions">
                                                {% if round.player2_actions %}
                                                    {% if round.player2_actions|length %}
                                                        {{ round.player2_actions|length }} 个行动
                                                    {% else %}
                                                        {{ round.player2_actions|default:0 }} 个行动
                                                    {% endif %}
                                                {% else %}
                                                    0 个行动
                                                {% endif %}
                                            </td>
                                            <td class="round-time">
                                                {{ round.timestamp|date:"H:i:s" }}
                                            </td>
                                            <td style="text-align: center;">
                                                <a href="{% url 'admin:battles_battleround_change' round.pk %}" 
                                                   style="color: #007bff; text-decoration: none;">查看详情</a>
                                            </td>
                                        </tr>
                                    {% endfor %}
                                </tbody>
                            </table>
                        {% else %}
                            <div class="no-rounds">
                                暂无回合数据
                            </div>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
            
            <!-- 分页 -->
            {% if page_obj.has_other_pages %}
                <div class="pagination">
                    {% if page_obj.has_previous %}
                        <a href="?p={{ page_obj.previous_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if status_filter %}&battle__status__exact={{ status_filter }}{% endif %}">&laquo; 上一页</a>
                    {% endif %}
                    
                    {% for num in page_obj.paginator.page_range %}
                        {% if page_obj.number == num %}
                            <span class="current">{{ num }}</span>
                        {% elif num > page_obj.number|add:'-3' and num < page_obj.number|add:'3' %}
                            <a href="?p={{ num }}{% if search_query %}&q={{ search_query }}{% endif %}{% if status_filter %}&battle__status__exact={{ status_filter }}{% endif %}">{{ num }}</a>
                        {% endif %}
                    {% endfor %}
                    
                    {% if page_obj.has_next %}
                        <a href="?p={{ page_obj.next_page_number }}{% if search_query %}&q={{ search_query }}{% endif %}{% if status_filter %}&battle__status__exact={{ status_filter }}{% endif %}">下一页 &raquo;</a>
                    {% endif %}
                </div>
            {% endif %}
        {% else %}
            <div class="no-rounds">
                <h3>暂无对战回合数据</h3>
                <p>当前没有找到任何对战回合记录。</p>
                {% if search_query or status_filter %}
                    <p><a href="?">清除筛选条件</a> 查看所有数据。</p>
                {% endif %}
            </div>
        {% endif %}
    </div>
</div>

<script>
function toggleBattle(index) {
    const content = document.getElementById('content-' + index);
    const icon = document.getElementById('toggle-' + index);
    const header = content.previousElementSibling;
    
    if (content.classList.contains('show')) {
        content.classList.remove('show');
        icon.classList.add('collapsed');
        header.classList.add('collapsed');
    } else {
        content.classList.add('show');
        icon.classList.remove('collapsed');
        header.classList.remove('collapsed');
    }
}

// 默认展开第一个对战
document.addEventListener('DOMContentLoaded', function() {
    if (document.getElementById('content-1')) {
        toggleBattle(1);
    }
});
</script>
{% endblock %}